<template>
  <div class="retailStoreData">
    <div class="searchBar">
      <el-date-picker
        v-model="searchParams.dates"
        type="datetimerange"
        :clearable="false"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right">
      </el-date-picker>
      <div class="name">店铺名称</div>
      <el-input
        style="width: 200px"
        v-model="searchParams.shopName"
        placeholder="请输入店铺名称"
        clearable>
      </el-input>
      <div class="name">商品ID</div>
      <el-input
        style="width: 200px"
        v-model="searchParams.productId"
        placeholder="请输入商品ID"
        clearable>
      </el-input>
<!--      <div class="name">仅退款率</div>-->
<!--      <el-input-->
<!--        v-model="searchParams.refundRateOnly"-->
<!--        placeholder="请输入仅退款率"-->
<!--        clearable>-->
<!--      </el-input>-->
<!--      <div class="name">退货率</div>-->
<!--      <el-input-->
<!--        v-model="searchParams.returnRate"-->
<!--        placeholder="请输入退货率"-->
<!--        clearable>-->
<!--      </el-input>-->
<!--      <div class="name">售后率</div>-->
<!--      <el-input-->
<!--        v-model="searchParams.afterSalesRate"-->
<!--        placeholder="请输入退货率"-->
<!--        clearable>-->
<!--      </el-input>-->
<!--      <div class="name">投产比</div>-->
<!--      <el-input-->
<!--        v-model="searchParams.productionRatio"-->
<!--        placeholder="请输入投产比"-->
<!--        clearable>-->
<!--      </el-input>-->

<!--      <div class="name">预估利润率</div>-->
<!--      <el-input-->
<!--        v-model="searchParams.estimatedProfitMargin"-->
<!--        placeholder="请输入预估利润率"-->
<!--        clearable>-->
<!--      </el-input>-->
<!--      <div class="name">净利润</div>-->
<!--      <el-input-->
<!--        v-model="searchParams.netProfit"-->
<!--        placeholder="请输入净利润"-->
<!--        clearable>-->
<!--      </el-input>-->
<!--      <div class="name">净利率</div>-->
<!--      <el-input-->
<!--        v-model="searchParams.netProfitMargin"-->
<!--        placeholder="请输入净利率"-->
<!--        clearable>-->
<!--      </el-input>-->
<!--      <div class="name">平均运费</div>-->
<!--      <el-input-->
<!--        v-model="searchParams.averageShippingCost"-->
<!--        placeholder="请输入平均运费"-->
<!--        clearable>-->
<!--      </el-input>-->
      <el-button style="margin-left: 14px;" type="primary" @click="handleSearch">查询</el-button>
    </div>
    <el-table
      style="width: 100%"
      :data="tableData"
      height="100%"
      stripe>
      <el-table-column label="序号" width="60">
        <template slot-scope="scope">
          {{scope.$index + 1 + (searchParams.pageNum - 1) * searchParams.pageSize}}
        </template>
      </el-table-column>
      <el-table-column
        prop="shopName"
        label="店铺名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="productId"
        label="商品ID"
        width="120">
      </el-table-column>
      <el-table-column prop="totalTransactionAmount">
        <template slot="header" slot-scope="scope">
          <el-tooltip
            effect="dark"
            content="该商品ID下所有的成交金额求和"
            placement="top">
            <span class="icon-info">
              <span>总成交金额</span>
              <i class="el-icon-info"></i>
            </span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="refundAmount"
        label="退款金额">
      </el-table-column>
      <el-table-column label="仅退款率">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleOpenChart(scope.row, '仅退款率')">
            <span>{{ stringToPercentage(scope.row.refundRateOnly) }}</span>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="退货率">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleOpenChart(scope.row, '退货率')">
            <span>{{ stringToPercentage(scope.row.returnRate) }}</span>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="售后率">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleOpenChart(scope.row, '售后率')">
            <span>{{ stringToPercentage(scope.row.afterSalesRate) }}</span>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="投产比">
        <template slot-scope="scope">
          <span>{{ numberToFixed2(scope.row.productionRatio) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="近7天投产比"
        width="130">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleOpenChart(scope.row, '近7天投产比')">
            <span>{{ numberToFixed2(scope.row.productionRatioInThePast7Days) }}</span>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="近30天投产比"
        width="130">
        <template slot-scope="scope">
          <span>{{ numberToFixed2(scope.row.productionRatioInThePast30Days) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总投产比">
        <template slot-scope="scope">
          <span>{{ numberToFixed2(scope.row.totalInvestmentRatio) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="预估利润率">
        <template slot-scope="scope">
          <span>{{ stringToPercentage(scope.row.estimatedProfitMargin) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="净利润">
        <template slot-scope="scope">
          <span>{{ numberToFixed2(scope.row.netProfit) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="净利率">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleOpenChart(scope.row, '净利率')">
            <span>{{ stringToPercentage(scope.row.netProfitMargin) }}</span>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="平均运费">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleOpenChart(scope.row, '平均运费')">
            <span>{{ scope.row.averageShippingCost }}</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageContain">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParams.pageNum"
        :page-size="searchParams.pageSize"
        :page-sizes="[100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      @opened="handleOpenedDialog"
      width="50%">
      <div
        style="width: 100%; height: 300px;"
        id="chartInstance">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import * as echarts from "echarts";
import { stringToPercentage, numberToFixed2 } from '@/utils/dataTreate';
import { getProduct } from "@/api/order";
import moment from 'moment';
export default {
  data() {
    const startTime = moment().subtract(90, 'days').format("yyyy-MM-DD 00:00:00");
    const endTime = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
    return {
      stringToPercentage,
      numberToFixed2,
      tableData: [],
      total: 0,
      searchParams: {
        dates: [startTime, endTime],
        shopName: "",
        productId: "",
        refundRateOnly: "",
        returnRate: "",
        afterSalesRate: "",
        productionRatio: "",
        estimatedProfitMargin: "",
        netProfit: "",
        netProfitMargin: "",
        averageShippingCost: "",

        pageSize: 100,
        pageNum: 1,
      },

      dialogTitle: "",
      dialogVisible: false,
      chartInstance: null,
      chartData: [],

      pickerOptions: {
        shortcuts: [{
          text: '最近一天',
          onClick(picker) {
            const start = moment().subtract(1, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const start = moment().subtract(7, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        },  {
          text: '最近半个月',
          onClick(picker) {
            const start = moment().subtract(15, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const start = moment().subtract(30, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        }, {
          text: '最近二个月',
          onClick(picker) {
            const start = moment().subtract(60, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const start = moment().subtract(90, 'days').format("yyyy-MM-DD 00:00:00");
            const end = moment().subtract(1, 'days').format("yyyy-MM-DD 23:59:59");
            picker.$emit('pick', [
              moment(start)["_d"], moment(end)["_d"]
            ]);
          }
        }]
      },
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      const params = {
        ...this.searchParams,
        startTime: this.searchParams.dates[0],
        endTime: this.searchParams.dates[1],
      }
      delete params.dates;
      getProduct(params).then(res => {
        const { total, rows } = res;
        this.tableData = rows;
        this.total = total;
      })
    },
    handleSearch() {
      this.initData();
    },
    handleSizeChange(v) {
      this.searchParams.pageNum = 1;
      this.searchParams.pageSize = v;
      this.initData();
    },
    handleCurrentChange(v) {
      this.searchParams.pageNum = v;
      this.initData();
    },
    handleOpenChart(data, title) {
      const { productId } = data;
      const keyWords = {
        "仅退款率": "refundRateOnly",
        "退货率": "returnRate",
        "售后率": "afterSalesRate",
        "近7天投产比": "productionRatioInThePast7Days",
        "净利率": "netProfitMargin",
        "平均运费": "averageShippingCost",
      }

      this.dialogVisible = true;
      this.dialogTitle = `【商品ID${productId}】【${title}】趋势图`;
      this.chartData = data[keyWords[title] + 'ChartList'];

    },
    handleOpenedDialog() {
      this.$nextTick(() => {
        this.initChartInstance()
      })
    },
    initChartInstance() {
      if(this.chartInstance) this.chartInstance.dispose();
      this.chartInstance = echarts.init(document.getElementById('chartInstance'));

      const xAxisData = this.chartData.map(item => item.date);
      const seriesData = this.chartData.map(item => item.value);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
        },
        grid: {
          left: 40,
          right: 40,
          bottom: 10,
          top: 40,
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLabel: {
            formatter: function (value, index) {
              return moment(value).format("MM-DD");
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: seriesData,
            type: 'line'
          }
        ]
      }
      this.chartInstance.setOption(option);
    }
  }
}
</script>
<style lang="scss" scoped>
div.retailStoreData {
  div.searchBar {
    display: flex;
    justify-content: start;
    align-items: center;
    .el-input, .el-select {
      width: 80px;
    }
    div.name {
      width: 60px;
      margin-right: 5px;
      font-size: 14px;
      &:not(:first-child) {
        margin-left: 14px;
      }
    }
    .el-button {
      margin-left: 14px;
    }
    margin-bottom: 20px;
  }
}
</style>
